<template>
  <a-menu class="side-menu" mode="inline" :selectedKeys="activeSideMenu || $route.fullpath" @select="handelSelect">
    <template v-for="(item) in subMenu">
      <a-sub-menu :key="item.path" v-if="item.children">
        <template #icon>
          <span :class="['iconfont', 'ft-size18', item.icon, list.includes(item.icon) ? 'side-menu-icon': '']" v-if="item.icon"></span>
          <HomeOutlined v-else />
        </template>
        <template #title>{{$t(`menu.${item.permission}`)}}</template>
        <a-menu-item v-for="i in showMenu(item.children)" :key="i.path">
          <span class="ant-menu-title-content-child-span">{{$t(`menu.${i.permission}`)}}</span>
          <span class="side-menu-collect" v-if="!isCollapse">
            <star-filled class="text-yellow" v-if="hasCollected(i.path)" @click.stop="delMark(i)"/>
            <star-outlined v-else @click.stop="addMark(i.id)"/>
          </span>
        </a-menu-item>
      </a-sub-menu>

      <a-menu-item v-if="!item.children && item.visible" :key="item.path">
        <template #icon>
          <span :class="['iconfont', 'ft-size18', item.icon, list.includes(item.icon) ? 'side-menu-icon': '']" v-if="item.icon"></span>
          <HomeOutlined v-else />
        </template>
        <span class="ant-menu-title-content-span">{{$t(`menu.${item.permission}`)}}</span>
        <span class="side-menu-collect" v-if="!isCollapse">
          <star-filled class="text-yellow" v-if="hasCollected(item.path)"  @click.stop="delMark(item)"/>
          <star-outlined v-else  @click.stop="addMark(item.id)"/>
        </span>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>
import { store } from '@/store'
import { HomeOutlined, StarOutlined, StarFilled } from '@ant-design/icons-vue'
import { mapState } from 'vuex'
import axios from "@/utils/request"
import { message } from 'ant-design-vue'
export default {
  components: {
    HomeOutlined,
    StarOutlined,
    StarFilled
  },
  data () {
    return {
      name: 'baseMenu',
      routeActive: '',
      list: ['icon-chanxianshishixinxi', 'icon-zhidanguanli', 'icon-paichandanguanli']
    }
  },
  computed: {
    ...mapState({
      subMenu: (state) => state.setting.subMenu,
      activeSideMenu: (state) => state.setting.activeSideMenu, 
      bookmarksList: (state) => state.setting.bookmarksList,
      isCollapse: (state) => state.setting.isCollapse
    }),
    selectedKeys: () => {
      return this.activeSideMenu || [this.$route.fullpath] || []
    },
  },
  methods: {
    handelSelect ({ key }, noNeedPushInRoute) {
      store.commit('updateState', { activeSideMenu: [key] }) 
      !noNeedPushInRoute && this.$router.push(key)
    },
    showMenu (list) {
      return list.filter((item) => item.visible)
    },
    async delMark(item) { 
      let delId =  (this.bookmarksList || []).filter(i=> i.path == item.path)[0]
      if(!delId) return  
      try { 
        const res = await axios.deleteAction('/api/system/menu-favorites/delete', {id: delId.id} );
        if (res.success) {
          message.success(res.msg || "操作成功"); 
          store.dispatch('getBookmarks')
        }
      }catch {
        console.log('取消收藏失败'); 
      }
    },
    async addMark(menuId) { 
      console.log("🚀 ~ file: sideMenu.vue:85 ~ addMark ~ record:", menuId)
      try { 
        const res = await axios.postAction('/api/system/menu-favorites/add', {menuId} );
        if (res.success) {
          message.success(res.msg || "操作成功"); 
          store.dispatch('getBookmarks')
        }
      }catch {
        console.log('新增收藏失败'); 
      }
    },
    hasCollected(val) {
      let list = (this.bookmarksList || []).map(i=> i.path)
      return list.includes(val)
    }
  },
  async created() {
    await store.dispatch('getBookmarks') 
  }
}
</script>